<template>
  <div class="big">
    <img src="../../../state/返回.png" alt="" style="width: 23px; position: absolute; left: 10px; top: 10px" @click="navi">
    <img src="../../../state/时间.png" alt="" style="width: 25px; position: absolute; right: 10px; top: 7px" @click="navi">
    <div class="t">
      <van-tabs animated v-model:active="active" @change="chang">
        <van-tab v-for="index in list" :title="index.name" :key="index.id" style="width: 200px;"></van-tab>
      </van-tabs>
      <div v-if="isLoading" class="skeleton">
        <div class="skeleton-item" v-for="n in 3" :key="n"></div>
      </div>
      <a-carousel v-else :default-current="current" @change="handleChange" :autoplay="true" animation-name="card"
        indicator-type="none" :style="{ width: '100%', height: '320px' }">
        <a-carousel-item v-for="item in catelist" :key="item.cid" :style="{ width: '60%' }" @click="inPage(item.cid)">
          <div class="box">
            <img :src="item.image" :style="{ width: '100%' }" />
            <p style="font-weight: 600;"><img src="../../../state/形状_u146.svg" alt=""
                style="width: 20px; position: relative; top: 5px"><span
                style="display: inline-block; margin-left: 3px">{{ item.title }}</span></p>
            <p style="font-size: small; color: grey">{{ item.desc }}</p>
          </div>
        </a-carousel-item>
      </a-carousel>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import { Tab, Tabs } from 'vant';
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useDataStore } from '../../stores/dataStore';

const store = useDataStore();
const { getMvList } = store;
const catelist = ref([]);
const router = useRouter();
const isLoading = ref(true);
const current = ref(2);
const active = ref(0);
const list = ref([
  { id: 0, name: '全部', icon: '' },
  { id: 1, name: '化学', icon: '' },
  { id: 2, name: '物理', icon: '' },
  { id: 3, name: '历史', icon: '' },
  { id: 4, name: '生物', icon: '' },
  { id: 5, name: '科学', icon: '' },
  { id: 6, name: '地理', icon: '' },
]);
const handleChange = (value) => {
  console.log(value);
};

const getList = async () => {
  try {
    const res = await axios.get(`http://localhost:3000/getCateList/?cid=${active.value}`);
    catelist.value = res.data.list;
  } catch (error) {
    console.error('Failed to fetch category list:', error);
  } finally {
    isLoading.value = false;
  }
};

const inPage = (id) => {  
  let cid = id
  if(id === 0){
    cid = 1
  }
  router.push(`/music/?id=${cid}`);
  getMvList(id);
};

onMounted(() => {
  getList();
});

const navi = () => {
  router.push('/');
};

const chang = (index) => {
  active.value = index;
  current.value = index;
  isLoading.value = true;
  getList();
};

onUnmounted(() => {
  // Cancel any ongoing requests if component is unmounted
});
</script>


<style scoped>
.box {
  width: 75%;
  margin: 0 auto;
  background-color: white;
  padding: 10px;
  line-height: 15px;
}

.skeleton {
  width: 100%;
  height: 250px;
  display: flex;
  margin-top: 20px;
  align-items: center;
  justify-content: center;
}

.skeleton-item {
  width: 60%;
  height: 100%;
  background-color: #f0f0f0;
  margin: 0 10px;
  border-radius: 8px;
}

.t {
  margin-top: 80%;
}

.big {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('../../../state/u100.png');
  background-repeat: no-repeat;
}
</style>